<template>
	<view style="min-height: 100vh;">
		<!-- 背景 -->
		<view class="img-bg"></view>
		<!-- #ifdef MP-WEIXIN -->
		<!-- 顶部导航 -->
		<custom-navber :title="'个人资料'" :bacColor="0"></custom-navber>
		<!-- #endif -->
		<!-- 绑定资料弹窗 -->
		<uni-id-pages-bind-mobile ref="bind-mobile-by-sms" @success="bindMobileSuccess"></uni-id-pages-bind-mobile>
		<view class="ping-30" :style="{paddingTop:menuObject.height + menuObject.top +8 + 'px'}">
			<view class="bac-col-f br-20 w-100 flex-dir-col ali-item-cen text-ali-c flex-center mt-30 h-310 pos-rela">
				<uni-id-pages-avatar width="100rpx" height="100rpx"></uni-id-pages-avatar>
				<image src="https://mp-22f314fc-fd0f-43b9-886e-ac79fe32303c.cdn.bspapp.com/image/hi.png"
					class="pos-abso hi-img"></image>
				<view class="fs-28 fw-600 mt-10">{{userInfo.nickname || '未设置'}}</view>
				<view class="fs-24 col-b1 mt-10">点击上传修改头像</view>
			</view>
			<view class="flex-dir-row bac-col-f br-20 ping-30 mt-30 ali-item-cen flex-x-bet mb-30">
				<view class="fs-28 fw-600">主页背景</view>
				<image @click="uploadhomepage" class="user-page-bg br-20" mode="aspectFill"
					:src="userInfo.homepage || 'https://mp-22f314fc-fd0f-43b9-886e-ac79fe32303c.cdn.bspapp.com/image/userpersonBg.jpg'" />
			</view>
			<view class="mt-30 bac-col-f br-20 ping-30">
				<view @click="openPopup('nickname')" class="pb-30">
					<view class="flex-dir-row ali-item-cen flex-x-bet">
						<view class="fs-28 fw-600">昵称</view>
						<view class="iconfont ic-you fs-36 col-0"></view>
					</view>
					<view class="fs-26 col-b1 mt-20">{{userInfo.nickname || '未设置'}}</view>
				</view>
				<view @click="openGenderPopup" class="ping-30-0 bor-top-f3">
					<view class="flex-dir-row ali-item-cen flex-x-bet">
						<view class="fs-28 fw-600">性别</view>
						<view class="iconfont ic-you fs-36 col-0"></view>
					</view>
					<view class="fs-26 col-b1 mt-20">
						{{userInfo.gender == 0?'未知':(userInfo.gender == 1?'男':(userInfo.gender == 2?'女':'未知'))}}
					</view>
				</view>
				<view @click="bindMobile" class="ping-30-0 bor-top-f3">
					<view class="flex-dir-row ali-item-cen flex-x-bet">
						<view class="fs-28 fw-600">手机号</view>
						<view class="iconfont ic-you fs-36 col-0"></view>
					</view>
					<view class="fs-26 col-b1 mt-20">{{userInfo.mobile || '未设置'}}</view>
				</view>
				<view @click="openBirthdayPopup" class="ping-30-0 bor-top-f3">
					<view class="flex-dir-row ali-item-cen flex-x-bet">
						<view class="fs-28 fw-600">生日</view>
						<view class="iconfont ic-you fs-36 col-0"></view>
					</view>
					<view class="fs-26 col-b1 mt-20">{{userInfo.birthday || '未设置'}}</view>
				</view>
				<view @click="openPopup('signature')" class="pt-30 bor-top-f3">
					<view class="flex-dir-row ali-item-cen flex-x-bet">
						<view class="fs-28 fw-600">签名</view>
						<view class="iconfont ic-you fs-36 col-0"></view>
					</view>
					<view class="fs-26 col-b1 mt-20">{{userInfo.signature || '未设置'}}</view>
				</view>
			</view>
		</view>
		<!-- 资料修改弹窗 -->
		<uni-popup ref="nickname" type="dialog">
			<uni-popup-dialog mode="input" @confirm="setInformation" inputType="nickname" title="设置昵称"
				:value="userInfo.nickname" placeholder="请输入要设置的昵称">
			</uni-popup-dialog>
		</uni-popup>
		<uni-popup ref="mobile" type="dialog">
			<uni-popup-dialog mode="input" @confirm="setInformation" inputType="number" title="设置联系方式"
				:value="userInfo.mobile" placeholder="请输入您的手机号">
			</uni-popup-dialog>
		</uni-popup>
		<uni-popup ref="signature" type="dialog">
			<uni-popup-dialog mode="input" @confirm="setInformation" inputType="text" title="设置签名"
				:value="userInfo.signature" placeholder="请设置您的个性签名吧">
			</uni-popup-dialog>
		</uni-popup>
		<!-- 性别选择弹窗 -->
		<uni-popup ref="genderPopup" type="bottom" background-color="#ffffff" borderRadius="30rpx 30rpx 0 0">
			<view class="slanted-rectangles br-30 pt-10 flex-dir-col ali-item-cen">
				<picker-view indicator-style="height: 50px;" :value="genderArr" @change="onGenderChange"
					class="picker-view" style="height: 250rpx;">
					<picker-view-column>
						<view class="text-ali-c" style="line-height: 50px;" v-for="(item,index) in list" :key="index">
							{{item}}
						</view>
					</picker-view-column>
				</picker-view>
				<view class="w-100 flex-dir-row flex-x-spa ali-item-cen mt-20 text-ali-c fs-26">
					<view @click="cancelGender" class="border-bf col-87 br-20 gender-btn">取消</view>
					<view @click="confirmGender" class="bac-col-00b col-f br-20 gender-btn">确定</view>
				</view>
			</view>
		</uni-popup>
		<!-- 生日选择弹窗 -->
		<uni-popup ref="birthdayPopup" type="bottom" background-color="#ffffff" borderRadius="30rpx 30rpx 0 0">
			<view class="slanted-rectangle br-30 pt-30 flex-dir-col ali-item-cen">
				<picker-view indicator-style="height: 50px;" :value="birthdayArr" @change="onBirthdayChange"
					class="picker-view">
					<picker-view-column>
						<view class="text-ali-c" style="line-height: 50px;" v-for="(item,index) in years" :key="index">
							{{item}}年
						</view>
					</picker-view-column>
					<picker-view-column>
						<view class="text-ali-c" style="line-height: 50px;" v-for="(item,index) in months" :key="index">
							{{item}}月
						</view>
					</picker-view-column>
					<picker-view-column>
						<view class="text-ali-c" style="line-height: 50px;" v-for="(item,index) in days" :key="index">
							{{item}}日
						</view>
					</picker-view-column>
				</picker-view>
				<view class="w-100 flex-dir-row flex-x-spa ali-item-cen mt-30 text-ali-c fs-26">
					<view @click="cancelBirthday" class="border-bf col-87 br-20 gender-btn">取消</view>
					<view @click="confirmBirthday" class="bac-col-00b col-f br-20 gender-btn">确定</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		store,
		mutations
	} from '@/uni_modules/uni-id-pages/common/store.js'
	export default {
		data() {
			const date = new Date()
			const years = []
			const year = date.getFullYear()
			const months = []
			const month = date.getMonth() + 1
			const days = []
			const day = date.getDate()
			for (let i = 1000; i <= date.getFullYear(); i++) {
				years.push(i)
			}
			for (let i = 1; i <= 12; i++) {
				months.push(i)
			}
			for (let i = 1; i <= 31; i++) {
				days.push(i)
			}
			return {
				// #ifdef MP-WEIXIN
				menuObject: uni.getMenuButtonBoundingClientRect(),
				// #endif
				// #ifndef MP-WEIXIN
				menuObject: 0,
				// #endif
				popupState: 'nickname',
				popupTitle: '设置昵称',
				popupPlaceholder: '请输入要设置的昵称',
				list: ['未知', '男', '女'],
				genderArr: [0],
				genderIndex: 0,
				birthdayArr: [9999, month, day],
				dialogValue: '',
				years,
				year,
				months,
				month,
				days,
				day,
			}
		},
		computed: {
			userInfo() {
				return store.userInfo
			},
		},
		methods: {
			// 打开修改资料弹窗
			openPopup(state) {
				this.popupState = state;
				this.$nextTick(() => {
					this.$refs[state].open();
				})
			},
			bindMobile() {
				// #ifdef MP-WEIXIN
				this.$refs['bind-mobile-by-sms'].open()
				// #endif

				// #ifdef H5
				//...去用验证码绑定
				this.bindMobileBySmsCode()
				// #endif
			},
			bindMobileSuccess() {
				mutations.updateUserInfo()
			},
			setInformation(e) {
				switch (this.popupState) {
					case 'nickname':
						// 校验昵称：1-10位字符
						if (e.length < 1 || e.length > 10) {
							this.$Toast('昵称格式不正确，昵称必须是1-10个字符', 'none', 2200);
						} else {
							mutations.updateUserInfo({
								nickname: e
							})
						}
						break;

					case 'mobile':
						// 校验手机号：11位数字，符合手机号格式
						const mobileReg = /^1[3-9]\d{9}$/; // 简单的手机号格式校验
						if (!mobileReg.test(Number(e))) {
							this.$Toast('手机号格式不正确，请输入有效的手机号', 'none', 2200);
						} else {
							mutations.updateUserInfo({
								mobile: e
							})
						}
						break;

					case 'signature':
						// 校验签名：1-20个字符
						if (e.length < 1 || e.length > 20) {
							this.$Toast('签名必须在1-20个字符之间', 'none', 2200);
						} else {
							mutations.updateUserInfo({
								signature: e
							})
						}
						break;

					default:
						break;
				}
			},
			// 上传背景图
			uploadhomepage(res) {
				uni.chooseImage({
					count: 1,
					sizeType: ["compressed "],
					success: async (res) => {
						let filePath = res.tempFilePaths[0]

						let cloudPath = this.userInfo._id + '' + Date.now()
						uni.showLoading({
							title: "更新中",
							mask: true
						});
						let {
							fileID
						} = await uniCloud.uploadFile({
							filePath,
							cloudPath,
							fileType: "image"
						});
						uni.hideLoading()
						mutations.updateUserInfo({
							homepage: fileID
						})
					}
				})
			},
			// 打开性别选择弹窗
			openGenderPopup() {
				this.$refs.genderPopup.open();
			},

			// 关闭性别选择弹窗
			closeGenderPopup() {
				this.$refs.genderPopup.close();
			},

			// 确认选择性别
			async confirmGender() {
				// 开始更新
				await mutations.updateUserInfo({
					gender: this.genderIndex
				})
				this.closeGenderPopup();
			},

			// 取消选择关闭性别弹窗
			cancelGender() {
				this.closeGenderPopup();
			},

			// 更新性别索引
			onGenderChange(e) {
				this.genderIndex = e.detail.value[0];
			},

			// 打开生日选择弹窗
			openBirthdayPopup() {
				this.$refs.birthdayPopup.open();
			},

			// 关闭生日选择弹窗
			closeBirthdayPopup() {
				this.$refs.birthdayPopup.close();
			},

			// 确认选择生日
			async confirmBirthday() {
				const birthday = this.year + '-' + this.month + '-' + this.day
				// 开始更新
				await mutations.updateUserInfo({
					birthday
				})
				this.closeBirthdayPopup();
			},

			// 取消选择关闭生日弹窗
			cancelBirthday() {
				this.closeBirthdayPopup();
			},

			// 更新生日索引
			onBirthdayChange(e) {
				this.year = this.years[e.detail.value[0]]
				this.month = this.months[e.detail.value[1]]
				this.day = this.days[e.detail.value[2]]
			}
		}
	}
</script>

<style lang="scss">
	.img-bg {
		position: fixed;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: -1;
		box-sizing: border-box;
		background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 1) 80%), url('https://mp-22f314fc-fd0f-43b9-886e-ac79fe32303c.cdn.bspapp.com/image/pagea-bg.jpg');
		background-size: cover;
		background-position: center;
		filter: blur(10px);
	}



	.user-avatar {
		width: 110rpx;
		height: 110rpx;
		border-radius: 50%;
	}

	.user-page-bg {
		width: 110rpx;
		height: 110rpx;
	}

	.hi-img {
		width: 180rpx;
		height: 100rpx;
		top: -30rpx;
		left: 35rpx;
	}

	.picker-view {
		width: 750rpx;
		height: 350rpx;
		margin-top: 20rpx;
	}

	.gender-btn {
		width: 270rpx;
		height: 80rpx;
		line-height: 80rpx;
	}

	.slanted-rectangle {
		position: relative;
		width: 100%;
		background-color: white;
		border-top-left-radius: 40rpx;
		border-top-right-radius: 40rpx;
		padding-bottom: 20rpx;
		bottom: -20rpx;
		z-index: 2;
	}

	.slanted-rectangle::before {
		content: '';
		position: absolute;
		top: -55rpx;
		z-index: -1;
		left: 0;
		width: 100%;
		height: 50%;
		background-color: white;
		transform: skewY(3deg);
		border-radius: 40rpx 40rpx 0 0;
	}

	.slanted-rectangles {
		position: relative;
		width: 100%;
		background-color: white;
		border-top-left-radius: 40rpx;
		border-top-right-radius: 40rpx;
		padding-bottom: 20rpx;
		bottom: -20rpx;
		z-index: 2;
	}

	.slanted-rectangles::before {
		content: '';
		position: absolute;
		top: -46rpx;
		z-index: -1;
		left: 0;
		width: 100%;
		height: 50%;
		background-color: white;
		transform: skewY(3deg);
		border-radius: 40rpx 40rpx 0 0;
	}
</style>